<template>
    <div class="out">
        <!-- 头部 -->
        <div class="header">笔记分类</div>
        <!-- 列表 -->
        <div class="list">
            <div v-for="i in list" :key="i.id" class="unit" @click="$router.push({name:'list',params:{id:i.id}})">
                <img :src="i.bgImg"/>
                <div class="title">{{i.class}}</div>
            </div>
        </div>
    </div>
</template>
<script>
import axios from 'axios'
import {mapState,mapMutations} from 'vuex'

export default {
   computed:{
        ...mapState(['list'])
   },
   methods:{
        ...mapMutations(['setList'])
   },
    mounted(){
        axios.get('/list').then(data=>{
            if(data.data.code === 1){

                this.setList({list:data.data.data})
                return 
            }
            alert(data.data.msg)
        })
    }
}
</script>
<style scoped>
.header{
    text-align: center;
    height: 50px;
    line-height: 50px;
}
.list{
    width: 100%;
}
.unit{
    width: 90%;
    margin: 15px 5%;
    position: relative;
    border-radius: 10px;
}

.unit img{
    width: 100%;
    height: 160px;
    border-radius: 10px;
}

.title{
    position: absolute;
    top:15px;
    left: 15px;
    color: #fff;
}
</style>